import React from 'react'
import { TabBar } from 'antd-mobile'
import { IconHome, IconDumbbell, IconRun, IconTarget, IconUser } from './icons'
import './index.css'

export interface TabBarProps {
  activeTab: string
  onTabChange: (tab: string) => void
}

const CustomTabBar: React.FC<TabBarProps> = ({ activeTab, onTabChange }) => {
  const tabs = [
    { key: 'home', title: '首页', icon: <IconHome /> },
    { key: 'training', title: '训练', icon: <IconDumbbell /> },
    { key: 'sport', title: '运动', icon: <IconRun /> },
    { key: 'data', title: '数据', icon: <IconTarget /> },
    { key: 'profile', title: '我的', icon: <IconUser /> },
  ]

  return (
    <TabBar activeKey={activeTab} onChange={onTabChange}>
      {tabs.map((item) => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

export default CustomTabBar

